<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-nestpie-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'pie',
      legendData: []
    }
  },

  computed: {

  },

  methods: {
    innerLabelFunc (params) {
      if (this.funcInnerLabel !== '' && typeof this.funcInnerLabel === 'function') {
        let name = this.funcInnerLabel(params)
        return name
      } else {
        if (params.percent < 10) {
          return ''
        } else if (params.name.length > 4) {
          return params.name.substring(0, 4) + '...'
        }
        return params.name
      }
    },
    outerLabelFunc (params) {
      if (this.funcOuterLabel !== '' && typeof this.funcOuterLabel === 'function') {
        let name = this.funcOuterLabel(params)
        return name
      } else {
        return params.name
      }
    },
    setSeries () {
      let vm = this
      let length1 = this.data.length
      let length2 = this.datainner.length
      this.series = []
      // this.legendData = []
      let sdata = []
      for (let i = 1; i < length1; i++) {
        // this.legendData.push(this.data[i][0])
        sdata.push({
          value: this.data[i][1],
          name: this.data[i][0]
        })
      }

      let ndata = []
      for (let i = 1; i < length2; i++) {
        // if (i > 0) {
          // this.legendData.push(this.datainner[i][0])
        ndata.push({
          value: this.datainner[i][1],
          name: this.datainner[i][0]
        })
        // }
      }

      let customlabel = null
      if (this.useCustomLabel) {
        customlabel = JSON.parse(decodeURIComponent(this.customLabel))
      }
      if (length1 > 0) {
      this.series.push({
        type: 'pie',
        name: length1 > 0 ? this.data[0][0] : '',
        avoidLabelOverlap: true,
        radius: [this.innerRadius, this.outerRadius],
        label: this.useCustomLabel ? customlabel : {
          show: this.showLabel,
          fontSize: this.outerLabelFontSize,
          color: this.outerLabelColor,
          position: this.positionLabel,
          formatter: this.formatterLabel ? this.formatterLabel : this.outerLabelFunc
        },
        labelLine: {
          show: this.showLabelLine,
          length: this.labelLineLength,
          length2: this.labelLineLength1
        },
        data: sdata
      })
      }

      if (length2 > 0) {
      this.series.push({
        type: 'pie',
        name: length2 > 0 ? this.datainner[0][0] : '',
        selectedMode: false,
        avoidLabelOverlap: true,
        radius: this.radiusLength,
        label: {
          show: this.showInnerLabel,
          fontSize: this.innerLabelFontSize,
          color: this.innerLabelColor,
          position: 'inner',
          formatter: vm.innerLabelFunc
        },
        data: ndata
      })
      }

      if (this.useBlankCilck) {
        this.series.push({
          type: 'pie',
          name: 'undefined',
          color: 'transparent',
          avoidLabelOverlap: true,
          radius: [this.outerRadius, this.outerBlankRadius],
          label: null,
          tooltip: {
            show: false
          },
          data: ['100']
        })
      }

      if (this.extendOption && this.funcExtOption !== '' && typeof this.funcExtOption === 'function') {
        this.funcExtOption(this)
      }
      // console.log('this.series', this.series)
    },

    handleclick (params) {
      // console.log(params)
      if (params.componentIndex === parseInt(this.componentIndex)) {
        // console.log(params)
        if (this.isPhone) {
          this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: params.seriesIndex
          })
          this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
          })
        }
        this.$emit('input', params.name)
        this.$emit('change', params.name)
      } else if (this.useBlankCilck && params.componentIndex === 2) {
        if (this.isPhone) {
          this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: params.seriesIndex
          })
          this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
          })
        }
        this.$emit('input', 'undefined')
        this.$emit('change', 'undefined')
      }
    }
  },

  watch: {
    innerRadius () {
      this.setSeries()
    },
    outerRadius () {
      this.setSeries()
    },

    showLabel () {
      this.setSeries()
    },
    positionLabel () {
      this.setSeries()
    },
    formatterLabel () {
      this.setSeries()
    },
    useCustomLabel () {
      this.setSeries()
    },
    customLabel () {
      this.setSeries()
    },
    componentIndex () {
      this.setSeries()
    },
    useLiandong () {
      this.setSeries()
    },
    useBlankCilck () {
      this.setSeries()
    },
    outerBlankRadius () {
      this.setSeries()
    },
    radiusLength () {
      this.setSeries()
    },
    showInnerLabel () {
      this.setSeries()
    },
    labelLineLength () {
      this.setSeries()
    },
    labelLineLength1 () {
      this.setSeries()
    },
    showLabelLine () {
      this.setSeries()
    },
    outerLabelColor () {
      this.setSeries()
    },
    outerLabelFontSize () {
      this.setSeries()
    },
    innerLabelColor () {
      this.setSeries()
    },
    innerLabelFontSize () {
      this.setSeries()
    },
    datainner: {
      deep: true,
      handler () {
        this.setSeries()
      }
    },
    extendOption () {
      this.setSeries()
    },
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
